import { Meta, Story, Canvas, Props } from "@storybook/blocks";

import { action } from '@storybook/addon-actions';
import { ViewPort, BottomResizable, TopResizable, RightResizable, LeftResizable } from "../../";
import { green, description, lorem } from "../Utils";
import { CommonHeader, PropsTable, StandardProps, AnchoredProps, ResizableProps } from "../Utils";
import * as ResizablePercentageStories from './Resizable.Percentage.stories';

<CommonHeader />

<Meta of={ResizablePercentageStories} />

## Resizable

Anchored resizable spaces by percentage size.

### Bottom resizable

<Canvas of={ResizablePercentageStories.Bottom} />

### Top resizable

<Canvas of={ResizablePercentageStories.Top} />

### Left resizable

<Canvas of={ResizablePercentageStories.Left} />

### Right resizable

<Canvas of={ResizablePercentageStories.Right} />

### Properties

<ResizablePercentageStories.Properties />
